<template>
    <div class="zenbu-container">
        <div class="page-header">
            <div class="header-actions">
                <!-- @click="$router.push('/main/biao')" -->
                <a href="http://116.205.137.229/" v-if="!isViewMode && !isEditMode"><el-button
                        icon="el-icon-arrow-left">返回</el-button></a>
                <!-- //判断不是编辑页面或者查看页面则隐藏这个返回 -->
                <!-- <el-button v-if="!isViewMode && !isEditMode" @click="$router.push('/main/biao')"
                    icon="el-icon-arrow-left">返回1</el-button> -->
                <!-- //查看 -->
                <el-button v-if="isViewMode" @click="handleReturn" icon="el-icon-arrow-left">返回列表</el-button>

                <!-- //判断是编辑页面才显示这个返回 !isViewMode && -->
                <el-button v-if="isEditMode" @click="handleReturn" icon="el-icon-arrow-left">返回列表</el-button>
                <span>
                    <el-button type="primary" @click="goToList" icon="el-icon-menu">列表</el-button>
                    <el-button v-if="!isViewMode" type="success" @click="handleSave" icon="el-icon-check">保存</el-button>
                    <el-button v-if="isViewMode" type="primary" @click="handleEdit" icon="el-icon-edit">编辑</el-button>
                    <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button>
                </span>
            </div>

        </div>

        <div class="main-form">
            <div class="form-section">
                <h1>{{ this.formData.applicationDepartment }}人员增补申请单</h1>
                <div class="form-date">
                    填单日期：<el-date-picker v-model="formData.fillDate" type="date" placeholder="选择日期"
                        :disabled="isViewMode" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                <table class="info-table">
                    <tbody>
                        <tr>
                            <td class="label-cell">申请部门</td>
                            <td>
                                {{ this.formData.applicationDepartment }}
                                <!-- <el-input v-model="formData.applicationDepartment" disabled
                                    class="elInputNoBor"></el-input> -->
                            </td>
                            <td class="label-cell">申请职位</td>
                            <td><el-input v-model="formData.applicationPosition" :disabled="isViewMode"></el-input></td>
                            <td class="label-cell">申请人</td>
                            <td><el-input style="width: 200px;" v-model="formData.applicant" :disabled="isViewMode"></el-input></td>
                        </tr>
                        <tr>
                            <td class="label-cell">类别</td>
                            <td>
                                <el-radio-group v-model="formData.employeeType" :disabled="isViewMode">
                                    <el-radio label="直接员工">直接员工</el-radio>
                                    <el-radio label="间接员工">间接员工</el-radio>
                                </el-radio-group>
                            </td>
                            <td class="label-cell">需求日期</td>
                            <td>
                                <el-date-picker v-model="formData.demandDate" type="date" placeholder="选择日期"
                                    :disabled="isViewMode" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-section">
                <table class="content-table">
                    <tbody>
                        <tr>
                            <td rowspan="3" class="label-cell">申请人数</td>
                            <td class="sub-label">原编制</td>
                            <td><el-input-number v-model="formData.originalStaffing" :min="0"
                                    :disabled="isViewMode"></el-input-number></td>
                            <td class="sub-label">现有人力</td>
                            <td><el-input-number v-model="formData.currentStaff" :min="0"
                                    :disabled="isViewMode"></el-input-number></td>
                            <td class="sub-label">差异人力</td>
                            <td><el-input-number v-model="formData.differenceStaff" :min="0"
                                    :disabled="isViewMode"></el-input-number></td>
                        </tr>
                        <tr>
                            <td class="sub-label">递补人力</td>
                            <td colspan="5">
                                <el-radio-group v-model="formData.replacementGender" :disabled="isViewMode"
                                    class="gender-group">
                                    <el-radio label="男">
                                        男 <el-input-number v-model="formData.replacementMaleCount" :min="0"
                                            :disabled="isViewMode" size="small"></el-input-number> 名
                                    </el-radio>
                                    <el-radio label="女">
                                        女 <el-input-number v-model="formData.replacementFemaleCount" :min="0"
                                            :disabled="isViewMode" size="small"></el-input-number> 名
                                    </el-radio>
                                    <el-radio label="男女不限">男女不限</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td class="sub-label">增加人力</td>
                            <td colspan="5">
                                <el-radio-group v-model="formData.increaseGender" :disabled="isViewMode"
                                    class="gender-group">
                                    <el-radio label="男">
                                        男 <el-input-number v-model="formData.increaseMaleCount" :min="0"
                                            :disabled="isViewMode" size="small"></el-input-number> 名
                                    </el-radio>
                                    <el-radio label="女">
                                        女 <el-input-number v-model="formData.increaseFemaleCount" :min="0"
                                            :disabled="isViewMode" size="small"></el-input-number> 名
                                    </el-radio>
                                    <el-radio label="男女不限">男女不限</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-section">
                <table class="content-table">
                    <tbody>
                        <tr>
                            <td class="label-cell">编制空缺原因</td>
                            <td colspan="6">
                                <div class="reason-group">
                                    <div class="reason-item">
                                        <el-checkbox v-model="formData.reasonForVacancy[0]" :disabled="isViewMode">
                                            递补离职缺，离职者姓名及离职日期：
                                        </el-checkbox>
                                        <el-input v-model="formData.reasonForVacancyDetails[0]"
                                            :disabled="isViewMode"></el-input>
                                    </div>
                                    <div class="reason-item">
                                        <el-checkbox v-model="formData.reasonForVacancy[1]" :disabled="isViewMode">
                                            业务扩增，扩增内容：
                                        </el-checkbox>
                                        <el-input v-model="formData.reasonForVacancyDetails[1]"
                                            :disabled="isViewMode"></el-input>
                                    </div>
                                    <div class="reason-item">
                                        <el-checkbox v-model="formData.reasonForVacancy[2]" :disabled="isViewMode">
                                            其它：
                                        </el-checkbox>
                                        <el-input v-model="formData.reasonForVacancyDetails[2]"
                                            :disabled="isViewMode"></el-input>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-section">
                <table class="content-table">
                    <tbody>
                        <tr>
                            <td rowspan="4" class="label-cell">职务描述</td>
                            <td class="sub-label">硬性资格 - 年龄</td>
                            <td colspan="4">
                                <el-radio-group v-model="formData.ageRequirement" :disabled="isViewMode">
                                    <el-radio label="不要求">不要求</el-radio>
                                    <el-radio label="要求">要求</el-radio>
                                </el-radio-group>
                                <el-input v-if="formData.ageRequirement === '要求'" v-model="formData.ageDetails"
                                    :disabled="isViewMode" placeholder="请输入年龄要求" class="requirement-input">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="sub-label">硬性资格 - 学历</td>
                            <td colspan="4">
                                <el-radio-group v-model="formData.educationRequirement" :disabled="isViewMode">
                                    <el-radio label="不要求">不要求</el-radio>
                                    <el-radio label="要求">要求</el-radio>
                                </el-radio-group>
                                <el-input v-if="formData.educationRequirement === '要求'"
                                    v-model="formData.educationDetails" :disabled="isViewMode" placeholder="请输入学历要求"
                                    class="requirement-input">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="sub-label">硬性资格 - 主修科目</td>
                            <td colspan="4">
                                <el-radio-group v-model="formData.majorRequirement" :disabled="isViewMode">
                                    <el-radio label="不要求">不要求</el-radio>
                                    <el-radio label="要求">要求</el-radio>
                                </el-radio-group>
                                <el-input v-if="formData.majorRequirement === '要求'" v-model="formData.majorDetails"
                                    :disabled="isViewMode" placeholder="请输入专业要求" class="requirement-input">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="sub-label">硬性资格 - 工作经验</td>
                            <td colspan="4">
                                <el-radio-group v-model="formData.experienceRequirement" :disabled="isViewMode">
                                    <el-radio label="不要求">不要求</el-radio>
                                    <el-radio label="要求">要求</el-radio>
                                </el-radio-group>
                                <el-input v-if="formData.experienceRequirement === '要求'"
                                    v-model="formData.experienceDetails" :disabled="isViewMode" placeholder="请输入经验要求"
                                    class="requirement-input">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">必备技能</td>
                            <td colspan="5">
                                <el-input type="textarea" v-model="formData.necessarySkills" :disabled="isViewMode"
                                    :rows="3" placeholder="请输入必备技能要求">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">薪酬标准</td>
                            <td><el-input v-model="formData.salaryStandard" :disabled="isViewMode"></el-input></td>
                            <td class="label-cell">复试人员</td>
                            <td><el-input v-model="formData.reinterviewPersons" :disabled="isViewMode"></el-input></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-section">
                <table class="approval-table">
                    <thead>
                        <tr>
                            <th>审批人</th>
                            <th>意见</th>
                            <th>签字</th>
                            <th>日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="approver">部门主管/经理</td>
                            <td><el-input type="textarea" v-model="formData.departmentOpinion"
                                    :disabled="isViewMode"></el-input></td>
                            <td><el-input v-model="formData.departmentSignature" :disabled="isViewMode"></el-input></td>
                            <td>
                                <el-date-picker v-model="formData.departmentDate" type="date" :disabled="isViewMode"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td class="approver">部长/总监</td>
                            <td><el-input type="textarea" v-model="formData.directorOpinion"
                                    :disabled="isViewMode"></el-input></td>
                            <td><el-input v-model="formData.directorSignature" :disabled="isViewMode"></el-input></td>
                            <td>
                                <el-date-picker v-model="formData.directorDate" type="date" :disabled="isViewMode"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td class="approver">总经理</td>
                            <td><el-input type="textarea" v-model="formData.generalManagerOpinion"
                                    :disabled="isViewMode"></el-input></td>
                            <td><el-input v-model="formData.generalManagerSignature" :disabled="isViewMode"></el-input>
                            </td>
                            <td>
                                <el-date-picker v-model="formData.generalManagerDate" type="date" :disabled="isViewMode"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td class="approver">企业管理部</td>
                            <td><el-input type="textarea" v-model="formData.corporateManagementOpinion"
                                    :disabled="isViewMode"></el-input></td>
                            <td><el-input v-model="formData.corporateManagementSignature"
                                    :disabled="isViewMode"></el-input></td>
                            <td>
                                <el-date-picker v-model="formData.corporateManagementDate" type="date"
                                    :disabled="isViewMode" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td class="approver">总裁/董事长</td>
                            <td><el-input type="textarea" v-model="formData.presidentOpinion"
                                    :disabled="isViewMode"></el-input></td>
                            <td><el-input v-model="formData.presidentSignature" :disabled="isViewMode"></el-input></td>
                            <td>
                                <el-date-picker v-model="formData.presidentDate" type="date" :disabled="isViewMode"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="form-section notes-section">
                <h3>备注：</h3>
                <ol>
                    <li>增补直接人员提前7日向人资单位提供签核完整的《人力增补申请单》。</li>
                    <li>增补间接人员提前15日向人资单位提供签核完整的《人力增补申请单》。</li>
                    <li>新增人力及编制之外岗位统一须呈总裁核准；</li>
                    <li>新增加编制岗位必须附上《岗位说明书》。</li>
                </ol>
                <div class="form-number"><span>表单编号及版本：AM - JY - 011 A/1</span> <span>保存期限：长期</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import zenbuApi from '@/api/zenbu';
import { formatDate } from '@/utils/date';

export default {
    data() {
        return {
            isViewMode: false,
            isEditMode: false,
            formData: {
                // bumeng:'',
                // bumeng:'生产部',
                // bumeng:'资材部',
                // bumeng:'品质部',
                // bumeng:'财务部',
                // bumeng:'销售部',
                //部门
                fillDate: '',
                applicationDepartment: '',//申请部门
                applicationPosition: '',
                applicant: '',
                employeeType: '',
                demandDate: '',
                originalStaffing: 0,
                currentStaff: 0,
                differenceStaff: 0,
                replacementGender: '',
                replacementMaleCount: 0,
                replacementFemaleCount: 0,
                replacementQuota: 0,
                increaseGender: '',
                increaseMaleCount: 0,
                increaseFemaleCount: 0,
                increaseQuota: 0,
                reasonForVacancy: [false, false, false],
                reasonForVacancyDetails: ['', '', ''],
                ageRequirement: '',
                ageDetails: '',
                languageRequirement: [false, false, false],
                englishLevelDetails: ['', ''],
                otherLanguageDetails: '',
                educationRequirement: '',
                educationDetails: '',
                majorRequirement: '',
                majorDetails: '',
                experienceRequirement: '',
                experienceDetails: '',
                necessarySkills: '',
                salaryStandard: '',
                reinterviewPersons: '',
                departmentOpinion: '',
                departmentSignature: '',
                departmentDate: '',
                directorOpinion: '',
                directorSignature: '',
                directorDate: '',
                generalManagerOpinion: '',
                generalManagerSignature: '',
                generalManagerDate: '',
                corporateManagementOpinion: '',
                corporateManagementSignature: '',
                corporateManagementDate: '',
                presidentOpinion: '',
                presidentSignature: '',
                presidentDate: ''
            }
        };
    },
    created() {
        const id = this.$route.query.id;
        const mode = this.$route.query.mode;
        this.isViewMode = mode === 'view';
        this.isEditMode = mode === 'edit';

        // 获取 URL 中的部门参数
        const department = this.$route.query.部门 || this.$route.query['%E9%83%A8%E9%97%A8'];
        if (department) {
            this.formData.applicationDepartment = department;
            console.log('部门参数：', department);
        }

        if (id) {
            this.fetchData(id);
        }
    },
    methods: {
        printForm() {
            window.print()
        },
        handleReturn() {
            this.$router.push('/main/biao/zenbu-list').then(() => {
                location.reload();
            });
        },
        async fetchData(id) {
            try {
                const response = await zenbuApi.getDetail(id);
                const data = response.data;

                // 处理日期格式
                ['fillDate', 'demandDate', 'departmentDate', 'directorDate',
                    'generalManagerDate', 'corporateManagementDate', 'presidentDate'].forEach(field => {
                        if (data[field]) {
                            data[field] = data[field].split('T')[0];
                        }
                    });

                // 处理空缺原因
                const reasonForVacancy = [false, false, false];
                const reasonForVacancyDetails = ['', '', ''];

                if (data.reasonForVacancy) {
                    const reasons = data.reasonForVacancy.split(',');
                    reasons.forEach(reason => {
                        if (reason.includes('递补离职缺:')) {
                            reasonForVacancy[0] = true;
                            reasonForVacancyDetails[0] = reason.replace('递补离职缺:', '');
                        } else if (reason.includes('业务扩增:')) {
                            reasonForVacancy[1] = true;
                            reasonForVacancyDetails[1] = reason.replace('业务扩增:', '');
                        } else if (reason.includes('其他:')) {
                            reasonForVacancy[2] = true;
                            reasonForVacancyDetails[2] = reason.replace('其他:', '');
                        }
                    });
                }

                // 处理语言要求
                const languageRequirement = [false, false, false];
                const englishLevelDetails = ['', ''];
                let otherLanguageDetails = '';

                if (data.languageRequirement) {
                    const languages = data.languageRequirement.split(',');
                    languages.forEach(lang => {
                        if (lang.includes('英语')) {
                            languageRequirement[0] = true;
                            const matches = lang.match(/四级:(.*?),六级:(.*?)\)/);
                            if (matches) {
                                englishLevelDetails[0] = matches[1];
                                englishLevelDetails[1] = matches[2];
                            }
                        } else if (lang === '普通话') {
                            languageRequirement[1] = true;
                        } else if (lang.includes('其他:')) {
                            languageRequirement[2] = true;
                            otherLanguageDetails = lang.replace('其他:', '');
                        }
                    });
                }

                // 合并数据
                this.formData = {
                    ...data,
                    reasonForVacancy,
                    reasonForVacancyDetails,
                    languageRequirement,
                    englishLevelDetails,
                    otherLanguageDetails
                };

            } catch (error) {
                this.$message.error('获取详情失败：' + error.message);
            }
        },
        goToList() {
            this.$router.push('/main/biao/zenbu-list');
        },
        handleEdit() {
            // 切换到编辑模式
            this.$router.push(`/main/biao/zenbu?id=${this.formData.id}`);
        },
        validateForm() {
            const requiredFields = {
                fillDate: '填单日期',
                applicationDepartment: '申请部门',
                applicationPosition: '申请职位',
                applicant: '申请人',
                employeeType: '员工类别',
                demandDate: '需求日期'
            };

            for (const [field, label] of Object.entries(requiredFields)) {
                if (!this.formData[field]) {
                    this.$message.warning(`请填写${label}`);
                    return false;
                }
            }

            // 验证数字字段
            const numberFields = {
                originalStaffing: '原编制',
                currentStaff: '现有人力',
                differenceStaff: '差异人力'
            };

            for (const [field, label] of Object.entries(numberFields)) {
                if (isNaN(this.formData[field]) || this.formData[field] < 0) {
                    this.$message.warning(`${label}不能为空且不能小于0`);
                    return false;
                }
            }

            return true;
        },
        async handleSave() {
            try {
                if (!this.validateForm()) {
                    return;
                }

                const confirmed = await this.$confirm('确认保存表单吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                if (confirmed === 'confirm') {
                    // 处理日期格式和数组转字符串
                    const formData = {
                        ...this.formData,
                        // 处理日期
                        fillDate: this.formData.fillDate ? this.formData.fillDate.split('T')[0] : null,
                        demandDate: this.formData.demandDate ? this.formData.demandDate.split('T')[0] : null,
                        departmentDate: this.formData.departmentDate ? this.formData.departmentDate.split('T')[0] : null,
                        directorDate: this.formData.directorDate ? this.formData.directorDate.split('T')[0] : null,
                        generalManagerDate: this.formData.generalManagerDate ? this.formData.generalManagerDate.split('T')[0] : null,
                        corporateManagementDate: this.formData.corporateManagementDate ? this.formData.corporateManagementDate.split('T')[0] : null,
                        presidentDate: this.formData.presidentDate ? this.formData.presidentDate.split('T')[0] : null,

                        // 处理空缺原因相关字段
                        reasonForVacancy: this.formData.reasonForVacancy.map((checked, index) => {
                            if (!checked) return '';
                            const detail = this.formData.reasonForVacancyDetails[index];
                            if (index === 0) return `递补离职缺:${detail}`;
                            if (index === 1) return `业务扩增:${detail}`;
                            if (index === 2) return `其他:${detail}`;
                            return '';
                        }).filter(item => item !== '').join(','),

                        // 将reasonForVacancyDetails数组转换为字符串
                        reasonForVacancyDetails: this.formData.reasonForVacancyDetails.join(','),

                        // 处理语言要求相关字段
                        languageRequirement: this.formData.languageRequirement.map((checked, index) => {
                            if (!checked) return '';
                            if (index === 0) return `英语(四级:${this.formData.englishLevelDetails[0]},六级:${this.formData.englishLevelDetails[1]})`;
                            if (index === 1) return '普通话';
                            if (index === 2) return `其他:${this.formData.otherLanguageDetails}`;
                            return '';
                        }).filter(item => item !== '').join(','),

                        // 将englishLevelDetails数组转换为字符串
                        englishLevelDetails: this.formData.englishLevelDetails.join(',')
                    };

                    // 处理数字字段
                    ['originalStaffing', 'currentStaff', 'differenceStaff', 'replacementMaleCount',
                        'replacementFemaleCount', 'replacementQuota', 'increaseMaleCount', 'increaseFemaleCount',
                        'increaseQuota'].forEach(field => {
                            formData[field] = formData[field] ? parseInt(formData[field]) : 0;
                        });

                    const response = await zenbuApi.save(formData);

                    if (response.data) {
                        this.$message.success('保存成功');
                        this.$router.push('/main/biao/zenbu-list');
                    }
                }
            } catch (error) {
                console.error('保存失败:', error);
                let errorMsg = '未知错误';
                if (error.response) {
                    errorMsg = error.response.data?.message || `服务器错误 (${error.response.status})`;
                } else if (error.request) {
                    errorMsg = '服务器无响应';
                } else {
                    errorMsg = error.message;
                }
                this.$message.error('保存失败：' + errorMsg);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
// ::v-deep .elInputNoBor .el-input__inner {
//     border: none;
//     background-color: transparent;
// }

.zenbu-container {
    padding: 32px;
    // background-color: #f5f7fa;
    min-height: 100vh;
    margin: 0px auto;
    width: 1200px;
}

.page-header {
    margin-bottom: 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 12px 16px;

}

.header-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    font-size: 20px;
    margin: 0 0 12px;
    font-weight: 600;
}

.form-date {
    text-align: right;
    color: #606266;
    margin-bottom: 10px;
}

.main-form {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.form-section {
    margin-bottom: 20px;
    text-align: left;

    &:last-child {
        margin-bottom: 0;
    }
}

.info-table,
.content-table,
.approval-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ebeef5;
    margin-bottom: 16px;

    td {
        padding: 8px;
        border: 1px solid #ebeef5;
        vertical-align: middle;
        text-align: center;

        &.label-cell {
            width: 100px;
            background: #f5f7fa;
            color: #606266;
            font-weight: 500;
            text-align: center;
        }

        &.sub-label {
            width: 200px;
            background: #f5f7fa;
            color: #606266;
            text-align: center;
        }
    }
}

.approval-table {
    th {
        background: #409EFF;
        color: white;
        padding: 10px;
        font-weight: 500;
        text-align: center;
    }

    .approver {
        width: 120px;
        background: #f5f7fa;
        text-align: center;
        color: #606266;
        font-weight: 500;
    }

    td {
        padding: 12px;
    }
}

.reason-group {
    .reason-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
            margin-bottom: 0;
        }

        .el-input {
            margin-left: 8px;
            flex: 1;
        }
    }
}

.gender-group {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-around;

    .el-input-number {
        margin: 0 8px;
        width: 180px;
    }
}

.requirement-input {
    margin-left: 16px;
    width: 300px;
}

.notes-section {
    color: #606266;


    h3 {
        margin: 0 0 12px;
        font-size: 16px;
        color: #2c3e50;
    }

    ol {
        margin: 0;
        padding-left: 20px;

        li {
            margin-bottom: 8px;
            line-height: 1.6;
            text-align: left;
        }
    }

    .form-number {
        margin-top: 16px;
        color: #909399;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }
}

:deep(.el-input__inner) {
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
        border-color: #409EFF;
    }

    &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
}

:deep(.el-textarea__inner) {
    min-height: 60px;
}

@media screen and (max-width: 768px) {
    .zenbu-container {
        padding: 12px;
    }

    .page-header {
        padding: 12px;

        .header-actions {
            flex-direction: column;
        }

        h1 {
            font-size: 18px;
        }
    }

    .main-form {
        padding: 16px;
    }

    .info-table,
    .content-table,
    .approval-table {
        td {

            &.label-cell,
            &.sub-label {
                width: auto;
            }
        }
    }

    .requirement-input {
        width: 100%;
        margin: 8px 0 0;
    }

    .gender-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media print {
    .zenbu-container {
        padding: 10;
        background: none;
        width: 800px;
    }

    .page-header {
        .header-actions {
            display: none;
        }
    }

    .main-form {
        box-shadow: none;
        padding: 0;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    ::v-deep .el-input__inner,
    ::v-deep .el-textarea__inner {
        border: none;
    }
}
</style>